<template>
	<view class="container">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="navBorder" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">我的关注</text>
		</uni-nav-bar>
		<view class="body bottom-ios">
			<EmptyContent v-if="!favExpertList[0]" top="250rpx" text="暂无关注的专家" img="qsy_zwxl" @refresh="refresh"></EmptyContent>
			<view class="hot flex-c" v-else>
				<view class="expert-list flex-c">
					<view class="expert-list-item" v-for="(expert, index) in favExpertList" :key="expert.id" @tap="$CHS.goExpertHome(expert.expertId)">
						<view class="expert-des-head flex-r ac">
							<view class="author-image border-round">
								<lazy-image class="inheritwh border-round" :src="expert.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
								<view class="expert-note" v-if="expert.saleArticleNum" :class="{'round': expert.saleArticleNum < 10}">
									<text>{{expert.saleArticleNum}}</text>
								</view>
							</view>
							<view class="author-info flex-c">
								<view class="info-top flex-r ac">
									<text class="text-primary">{{expert.expertName}}</text>
									<image v-if="expert.cardFlag == 1" src="@/public/images/public/y@1x.png" mode="aspectFit"></image>
								</view>
								<view class="info-detail text-small text-hidden color-grey">{{expert.remark}}</view>
							</view>
							<view class="author-fav flex-r">
								<button class="favbtn active-msg" type="warn" size="mini" @tap.stop="selectNofollowReason(expert.expertId, index)">取消关注</button>
								<button class="favbtn active-fav" :class="{'nochat': expert.userIdentity != 1}" type="warn" size="mini" @tap.stop="$CHS.goChat(expert.expertId, expert.userIdentity)">私信</button>
							</view>
						</view>
						<view class="expert-des-body flex-c">
							<view class="author-info-tag flex-r ac">
								<text class="tag-blue text-hidden" v-if="expert.expertTag">{{expert.expertTag}}</text>
								<text class="tag-red" v-if="expert.hotContineTxt">{{expert.hotContineTxt}}</text>
								<text class="tag-gold" v-else-if="expert.hitResultTxt">{{expert.hitResultTxt}}</text>
							</view>
							<view class="author-result-detail flex-r ac text-small color-red" v-if="Number(expert.hitRate)>=60">
								<text class="small-text">{{expert.hitRateName}}：</text>
								<text class="num">{{expert.hitRate}}%</text>
							</view>
						</view>
						<view class="expert-des-foot text-secondary flex-r ac jsb">
							<view class="flex-r ac">
								<text>近7天有</text>
								<text class="color-blue">{{expert.newArticleNum || 0}}</text>
								<text>条最新方案</text>
							</view>
							<view class="color-blue flex-r ac">
								<text>去查看</text>
								<image class="icon" src="@/public/images/public/yjt_h.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list-end flex-r pb20" v-if="favExpertList[0] && isEnd">
				<text>已经到底啦～</text>
			</view>
		</view>
		<NofollowReason :expertId.sync="selectExpertId" @select="noFavExpert(selectExpertId, selectIndex, $event)"></NofollowReason>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNo: 1,
				isEnd: false,
				favExpertList: [],
				navBorder: false,
				
				selectExpertId: null,
				selectIndex: 0
			}
		},
		components: {
			NofollowReason: () => import('./components/ch-nofollow/ch-nofollowreason.vue')
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		onLoad() {
			this.getFavExperts()
		},
		onReachBottom() {
			if(!this.isEnd){
				this.getFavExperts()
			}
		},
		onPullDownRefresh() {
			this.pageNo = 1
			this.getFavExperts()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onPageScroll(e) {
			if(e.scrollTop > 10){
				this.navBorder = true
			}else{
				this.navBorder = false
			}
		},
		methods: {
			//刷新
			refresh() {
				this.pageNo = 1
				this.getFavExperts()
			},
			//关注的专家
			getFavExperts() {
				this.$http.get({
					url: '/api/appUser/queryUserFollowExportRows',
					data: {
						type: 2,
						userId: this.user.userId,
						pageNo: this.pageNo,
						pageSize: 10,
					},
				}).then(data => {
					console.log(data);
					if(data.success && data.result.total){
						if(data.result.current == 1){
							this.favExpertList = data.result.records
						}else{
							this.favExpertList.push(...data.result.records)
						}
						this.isEnd = data.result.current >= data.result.pages
						this.pageNo = data.result.current + 1
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			selectNofollowReason(commonId, index) {
				this.selectExpertId = commonId;
				this.selectIndex = index
			},
			//取消关注专家
			noFavExpert(commonId, index, reason) {
				this.$http.post({
					url: '/api/appUser/upcareUserFollow',
					data: {
						commonId,
						reason,
						type: 2,
						userId: this.user.userId,
					},
				}).then(data => {
					console.log(data);
					if(data.success){
						this.favExpertList.splice(index, 1)
						this.$store.commit('NO_FOLLOW_EXPERT', commonId)
						this.$ShowToast({text: '已取消关注'})
						this.$forceUpdate()
					}else{
						uni.showToast({
							title: data.message,
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log(err);
					uni.showToast({
						title: '操作失败，请稍后重试',
						icon: 'none'
					})
				})
			},
			close() {
				this.$nextTick(()=>{
					this.visible = false
				})
			}
		}
	}
</script>

<style lang="scss">	
	.container{
		padding: 0;
	}
	.body{
		margin: 0 20rpx;
	}
	.hot{
		padding-top: 20rpx;
		.expert-list{
			.expert-list-item{
				margin: 0 0 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 0 20rpx;
				.expert-des-head{
					margin-top: 20rpx;
					.author-image{
						width: 88rpx;
						height: 88rpx;
						background-color: #FFFFFF;
						background-size: 100%;
						position: relative;
					}
					.author-info{
						flex: 2;
						margin-left: 20rpx;
						.info-top{
							image{
								margin-left: 7rpx;
								width: 26rpx;
								height: 26rpx;
							}
						}
						.info-detail{
							margin-top: 20rpx;
							max-width: 190rpx;
						}
					}
					.author-fav{
						.favbtn{
							height: 60rpx;
							line-height: 60rpx;
							box-sizing: border-box;
							border-radius: 30rpx;
							font-size: 24rpx;
							color: #FFFFFF;
							padding: 0;
							margin: 0;
							&.active-msg{
								width: 160rpx;
								color: #0055FF;
								background: #FFF;
								border: 2rpx solid #0055FF;
								line-height: 56rpx;
								margin-right: 20rpx;
							}
							&.active-fav{
								width: 120rpx;
								background: #0055FF;
								line-height: 60rpx;
								border: none;
							}
							&.nochat{
								border-color: #99BBFF;
								color: #99BBFF;
							}
						}
					}
				}
				.expert-des-body{
					margin-top: 15rpx;
					padding-bottom: 20rpx;
					box-shadow: 0 1rpx 0 0 #EDEDED;
					.author-info-tag{
						text:first-child{
							margin: 0;
						}
						.tag-blue{
							max-width: 150rpx;
						}
					}
					.author-result-detail{
						margin-top: 15rpx;
						font-weight: 500;
					}
				}
				.expert-des-foot{
					padding: 28rpx 0;
					color: #5C7099;
					.icon{
						width: 25rpx;
						height: 26rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
</style>
